<template>
	<view class="">
		<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff" autoplay
			:interval="3000" :duration="1000" vertical>
			<swiper-item>
				<image src="../../static/pic1.jpeg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/pic2.jpeg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/pic3.jpeg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/pic4.jpeg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
	<view class="">
		<image src="../../static/logo.png" mode="widthFill" class="pic1"></image>
	</view>
</template>

<script setup></script>

<style lang="scss" scoped>
	.pic1 {
		width: 100px;
		height: 100px;
	}

	swiper {
		width: 100vw;
		height: 200px;
		border: 1px solid green;

		swiper-item {
			width: 100%;
			height: 100%;
			background-color: pink;

			image {
				width: 100%;
				height: 100%;
			}
		}

		swiper-item:nth-child(2n) {
			background-color: orange;
		}
	}
</style>